<template>
  <transition name="dialog">
    <div v-if="beginLogin">
      <div :class="['promptPanel', 'grid_6', [beginLogin == true? 'in': '']]">
        <div class="prompot-title">
          <div>登录</div>
          <div class="prompot-close" @click="closePrompot">
            <i class="fa fa-close close-icon"></i>
          </div>
        </div>
        <div class="prompot-content ">
          <div class="tipMessage">
            {{logined.tipMessage}}
          </div>
          <div class="operator-item-panel clearfix">
            <div class="item-label"><label for="userAccount">登录名</label></div>
            <input id="userAccount" class="item-input" v-model="login.userAccount"/>
          </div>
          <div class="operator-item-panel clearfix">
            <div class="item-label"><label for="password">密码</label></div>
            <input type="password" id="password" class="item-input" v-model="login.password"/>
          </div>
          <div v-if="needVeriCode">
            <div class="operator-item-panel clearfix">
              <div class="item-label"><label for="veriCode">验证码</label></div>
              <input type="text" id="veriCode" class="item-input" v-model="login.veriCode"/>
            </div>
            <div class="flex flex-v flex-align-center" v-html="currentCode"></div>
          </div>
          <div class="single-btn">
            <a @click="userLogin">登录</a>
          </div>
        </div>
      </div>
      <div :class="['modal-backdrop', [beginLogin == true? 'in': '']]"></div>
    </div>
  </transition>
</template>

<script>
import axios from '../../node_modules/axios/dist/axios'
export default {
  props: {
    beginLogin: Boolean
  },
  data () {
    return {
      login: {
        userAccount: '',
        password: '',
        veriCode: ''
      },
      logined: {
        tipMessage: '',
        showUserName: ''
      },
      codeSvg: ''
    }
  },
  mounted () {},
  computed: {
    currentCode () {
      if (this.$store.state.needVeriCode) {
        return this.$store.state.veriCode
      }
    },
    needVeriCode () {
      return this.$store.state.needVeriCode
    }
  },
  methods: {
    closePrompot () {
      this.login.userAccount = ''
      this.login.password = ''
      this.login.veriCode = ''
      this.logined.tipMessage = ''
      this.$emit('close')
    },
    userLogin () {
      let _this = this
      axios.post('/login/userLogin', {
        userAccount: this.login.userAccount,
        password: this.login.password,
        veriCode: this.login.veriCode
      }).then(function (res) {
        if (res.data.status !== 200) {
          _this.logined.tipMessage = res.data.message
          _this.login.userAccount = ''
          _this.login.password = ''
          _this.login.veriCode = ''
          if (res.data.datas.needVeriCode) {
            _this.$store.dispatch('obtainVeriCodeAsyn')
          }
          return
        }
        _this.login.userAccount = ''
        _this.login.password = ''
        _this.login.veriCode = ''
        _this.logined.tipMessage = ''
        // 登录成功清空vuex的登录状态
        _this.$store.commit('clearVeriCode')
        _this.$emit('close')
        _this.$emit('success', res.data.datas)
      })
    }
  }
}
</script>

<style scoped>
@import '../assets/css/login-register.css';
</style>
